<template>
  <div class="person">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}  {{ nl }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>
<script lang="ts" setup name="Person234">
// toRef和toRefs作用：将一个响应式对象中的每一个属性，转换为ref对象
// toRef和toRefs功能一致，但toRefs可以批量转换
import { reactive, toRef,toRefs } from 'vue'
  let person = reactive({
    name: '张三',
    age:  18
  })
  let {name,  age} = toRefs(person)
  let nl = toRef(person,'age')
  console.log(nl.value)
  console.log(name, age)
  function changeName(){
    name.value +='~'
  }
  function changeAge(){
    age.value += 1
  }
</script>

<style scoped>
    .person {
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
</style>
